<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ page session="true" %>
<spring:url value="/" var="baseUrl" />
<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GSIT: QC System</title>
    <meta name="description" content="gsit">
    <meta name="author" content="vivek">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


  
    <!-- Styles --> 
    <link type="text/css" href="${baseUrl}resources/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    <link href="${baseUrl}resources/bootstrap/bootstrap.css" rel="stylesheet">
    <link type="text/css" href="${baseUrl}resources/css/jquery.dataTables.css" rel="stylesheet">
    
    <link href="${baseUrl}resources/css/demo.css" rel="stylesheet">
    <link href="${baseUrl}resources/css/style.css" rel="stylesheet">
    
     <!--scripts-->

        <script type="text/javascript" src="${baseUrl}resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="${baseUrl}resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        
        <script type="text/javascript" src="${baseUrl}resources/js/jquery.dataTables.min.js"></script>
       
		
        <style type="text/css">
        
        
        #processerDiv {
		    position:fixed;
		    top: 50%;
		    left: 50%;
		    width:30em;
		    height:18em;
		    margin-top: -9em; /*set to a negative number 1/2 of your height*/
		    margin-left: -15em; /*set to a negative number 1/2 of your width*/
		    border: 1px solid #ccc;
		    background-color: #f3f3f3;
		}
        
        
        </style>

       
  

  </head>

 <!--  <body onload="javascript:setTimeout('location.reload(true);',5000);"> -->
 <body > 

  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="css/custom-theme/jquery.ui.1.8.16.ie.css"/>
  <![endif]-->

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="http://godspeedglobalservices.com">Welcome to QC System </a>
          <ul class="nav">
            <li class="active"><a href="${baseUrl}home">Home</a></li>
            <li><a href="${baseUrl}issues">Feedback/Issues</a></li>
            <li><a href="${baseUrl}contact">Contact</a></li>
          </ul>
          <div class="pull-right" style="color: white; padding-top: 10px;">
            Hello :<c:out value="${login.username}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="${baseUrl}logout">Logout</a> 
            
          </div>
          
        </div>
      </div>
    </div>


    <div class="container">

      <div class="content">
        <div class="page-header">
          <h4>Waiting QC Records....</h4>
        </div>
        <div class="row">

          <!--left col-->
          

          <!--welcome-->
          <div align="center" >      
           
              <table id="recodes"   class="table-grid">
              	<thead>
			    <tr>
			        <th>No.</th>
			        <th>Name</th>
			        <th>Action</th>
			        
			    </tr>
			    </thead>
			    <tbody id="tbody">
			    </tbody>
			</table>  
             
           
          </div>
          <!--end welcome-->


           <!--end col-->

        </div>
      </div>
      
      <div id="processerDiv" class="processerDiv" >
      	 <img alt="" src="${baseUrl}resources/images/loading.gif">
      </div>

      <footer>
        <p>&copy; Godspeed IT services. </p>
      </footer>

    </div> <!-- /container -->


      <script type="text/javascript">
      			function loadWndow( id){
      				window.open('${baseUrl}display/'+id,'_self');
      			}
		        $(document).ready(function () {
		            /* $("#recodes").dataTable({
		            	"sDom": '<"H"Tfr>t<"F"ip>'
		            }); */
		            $("#processerDiv").hide();    
		            reloadTable();
		        });
		        
		        function reloadTable() {
		        	$("#processerDiv").show();  
		        	var rowCount = $('#recodes >tbody >tr').length;

		        	var getAllRecordsJSONprocesser = $.getJSON("${baseUrl}getAllRecords",  function(data){  
		        		//console.log(data);
		        		if(data.length != rowCount){
		        			$('#recodes >tbody').html("");
		        			var rowString="";
		        			for (var i = 0; i < data.length; i++) {
				        		rowString+="<tr>";
				        		rowString+="<td align='center'>"+(i+1)+"</td>";
				        		rowString+="<td align='left'>"+ data[i].name+"</td>";
				        		rowString+="<td ><div id='buttons'><input type='button'   onclick='loadWndow("+data[i].id+")' class='button' value='View' /></div></td>";
				        		rowString+="</tr>";
				        		
			        		}
			        		$('#recodes >tbody').append( rowString);
		        		}
		        		
		        		/* 
		        		$('#buttons').addClass('buttons');
		        		$('.button').addClass('button'); */

		            });
		        	
		        	
		        	getAllRecordsJSONprocesser.complete(function() { 
		        		
		        		$("#processerDiv").hide();   
		        	});
		        	
		       };
		        
		      window.setInterval(function() {
					reloadTable();
				}, 5000);
			
		      </script>

 		<!--daterangepicker-->
        <script type="text/javascript" src="${baseUrl}resources/third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>
        <script type="text/javascript" src="${baseUrl}resources/third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>

        <!--wijmo-->
        <script src="${baseUrl}resources/third-party/wijmo/jquery.mousewheel.min.js" type="text/javascript"></script>
        <script src="${baseUrl}resources/third-party/wijmo/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
        <script src="${baseUrl}resources/third-party/wijmo/jquery.wijmo-open.1.5.0.min.js" type="text/javascript"></script>


        <!-- FileInput -->
        <script src="${baseUrl}resources/third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
        <script src="${baseUrl}resources/third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>

 		<!--init for this page-->
        <script type="text/javascript" src="${baseUrl}resources/js/demo.js"></script>

		

       

  </body>
</html>
